<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3374891_wtj8tk85bq.css">
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            padding: 0;
            margin: 0;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            display: flex;
            align-items: center;
            width: 100%;
            height: 44px;
            background-color: #fb656e;
            color: #fff;
        }
        header h2{
            width: 20%;
            margin-left: 20px;
        }
        header input{
            width: 60%;
            height: 30px;
            border: 0;
            outline: 0;
            border-radius: 20px;
            text-indent: 2em;
        }
        main{
            flex: 1;
            overflow-y: scroll;
            background-color: #fef0eb;
        }
        main .main{
            width: 94%;
            margin-left: 3%;
            height: 330px;
        }
        main .banner{
            width: 100%;
            height: 160px;
        }
        .banner img{
            width: 100%;
        }
        .nav{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            text-align: center;
            height: 160px;
        }
        .recommend{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
            width: 100%;
            height: 400px;
            background-color: #d84846;
        }
        .recommend-list{
            width: 30%;
            height: 48%;
            color: #fff;
            background-color: #fff;
            border-radius: 20px;
            text-align: center;
        }
        .rec-img{
            width: 100%;
            height: 70%;
        }
        .rec-p{
            width: 100%;
            height: 30%;
            /* padding-top: 10px; */
            border-radius: 20px;
            background-color: #42bfb1;
        }
        .rec-p p{
            font-size: 18px;
            font-weight: 700;
        }
        .shop{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            /* align-content: space-between; */
            width: 100%;
            /* height: 250px; */
        }
        .shop-list{
            width: 48%;
            height: 300px;
            margin-bottom: 18px;
        }
        .shop-list .img{
            height: 70%;
            background-color: cadetblue;
        }
        .shop .p{
            height: 30%;
            line-height: 30px;
            background-color: #fff;
        }
        .p .p-title{
            font-size: 18px;
            font-weight: 700;
        }
        .p span{
            color: #999;
        }
        .p .p-price{
            font-size: 20px;
            color: red;
        }
        footer{
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            font-size: 10px;
            width: 100%;
            height: 55px;
        }
        .footers i{
            font-size: 30px;
            color: #a27647;
        }
    </style>
</head>
<body>
    <header>
        <h2>有品</h2>
        <input type="text" placeholder='空气净化器滤芯'>
    </header>
    <main>
        <div class="main">
            <div class="banner">
                <img src="./imgs/1.jpg" alt="">
            </div>
            <div class="nav">
                <div class="item">
                    <img src="./imgs/2.png" alt="">
                    <p>每日上新</p>
                </div>
                <div class="item">
                    <img src="./imgs/3.png" alt="">
                    <p>小米众筹</p>
                </div>
                <div class="item">
                    <img src="./imgs/4.png" alt="">
                    <p>BEST</p>
                </div>
                <div class="item">
                    <img src="./imgs/5.png" alt="">
                    <p>热销排行</p>
                </div>
                <div class="item">
                    <img src="./imgs/6.png" alt="">
                    <p>小米自营</p>
                </div>
                <div class="item">
                    <img src="./imgs/7.png" alt="">
                    <p>名品折扣</p>
                </div>
                <div class="item">
                    <img src="./imgs/8.png" alt="">
                    <p>超赞精品</p>
                </div>
                <div class="item">
                    <img src="./imgs/9.png" alt="">
                    <p>有品直播</p>
                </div>
                <div class="item">
                    <img src="./imgs/10.png" alt="">
                    <p>生活超市</p>
                </div>
                <div class="item">
                    <img src="./imgs/11.png" alt="">
                    <p>天天福利</p>
                </div>
            </div>
        </div>
        <div class="recommend">
            <div class="recommend-list">
                <div class="rec-img"></div>
                <div class="rec-p">
                    <p>影音大牌放价</p>
                    <span>5折抢家庭影院</span>
                </div>
            </div>
            <div class="recommend-list">
                <div class="rec-img"></div>
                <div class="rec-p"></div>
            </div>
            <div class="recommend-list">
                <div class="rec-img"></div>
                <div class="rec-p"></div>
            </div>
            <div class="recommend-list">
                <div class="rec-img"></div>
                <div class="rec-p"></div>
            </div>
            <div class="recommend-list">
                <div class="rec-img"></div>
                <div class="rec-p"></div>
            </div>
            <div class="recommend-list">
                <div class="rec-img"></div>
                <div class="rec-p"></div>
            </div>
        </div>
        <div class="shop">
            <div class="shop-list">
                <div class="img"></div>
                <div class="p">
                    <p class="p-title">米家落地扇1X</p>
                    <span>小爱控制，14米送风</span>
                    <p class="p-price">￥299</p>
                </div>
            </div>
            <div class="shop-list">
                <div class="img"></div>
                <div class="p">
                    <p class="p-title">湿温度计</p>
                    <span>湿温度计</span>
                    <p class="p-price">￥29</p>
                </div>
            </div>
            <div class="shop-list">
                <div class="img"></div>
                <div class="p">
                    <p class="p-title">电动拖把</p>
                    <span>自洁滚刷，一体式水箱</span>
                    <p class="p-price">￥829</p>
                </div>
            </div>
            <div class="shop-list">
                <div class="img"></div>
                <div class="p">
                    <p class="p-title">眼部按摩仪</p>
                    <span>给眼睛做个SPA</span>
                    <p class="p-price">￥299</p>
                </div>
            </div>
            <div class="shop-list">
                <div class="img"></div>
                <div class="p">
                    <p class="p-title">理发器</p>
                    <span>两档控速大功率理发器</span>
                    <p class="p-price">￥79</p>
                </div>
            </div>
            <div class="shop-list">
                <div class="img"></div>
                <div class="p">
                    <p class="p-title">空调扇</p>
                    <span>强力制冷便携方便</span>
                    <p class="p-price">￥169</p>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="footers">
            <i class="iconfont icon-fangzi"></i>
            <p>首页</p>
        </div>
        <div class="footers">
            <i class="iconfont icon-yigui"></i>
            <p>分类</p>
        </div>
        <div class="footers">
            <i class="iconfont icon-chabei"></i>
            <p>生活</p>
        </div>
        <div class="footers">
            <i class="iconfont icon-gouwuche"></i>
            <p>购物车</p>
        </div>
        <div class="footers">
            <i class="iconfont icon-wo"></i>
            <p>我的</p>
        </div>
    </footer>
</body>
</html>